﻿<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
  <title>幸运大转盘</title>
  <link rel="stylesheet" type="text/css" href="css/style.css?v=11" />
  <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
  <script type="text/javascript" src="js/awardRotate.js"></script>
  <script src="js/index.js?v=201811071657"></script>
  <style>
    /* .container-bg{
      background: url(images/body_bg01.jpg) no-repeat top;
      background-size: cover;
      background-attachment: fixed;
      width: 100%;
      height: 100%;
    } */
    .container-bg{
      overflow: hidden;
    }
    .bg{
      box-sizing: border-box;
      background: url(images/body_bg.jpg) no-repeat;
      background-size: cover;
      background-attachment: fixed;
      width: 100%; 
      height: 100%;
      padding-top: 31vw;
    }
    .turnplate {
      width: 3.5rem;
      height: 3.5rem;
      position: relative;
    }

    #wheelcanvas {
      width: 3.2rem;
      height: 3.2rem;
      position: absolute;
      top: 50%;
      left: 50%;
      /* transform: translateX(-50%) translateY(-50%);
            -webkit-transform: translateX(-50%) translateY(-50%); */
      margin-top: -1.6rem;
      margin-left: -1.6rem;
      border-radius: 50%;
    }

    .loading {
      position: fixed;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.5);
    }

    .loading .loadcon {
      width: 1.2rem;
      height: 1.2rem;
      background-color: rgba(0, 0, 0, 0.5);
      border-radius: 0.1rem;
      margin: 0 auto;
      margin-top: 57%;
      text-align: center;
    }

    .loading .loadcon img {
      width: 32px;
      height: 32px;
      margin-top: 22%;
    }

    .loading .loadcon .infos {
      color: #999;
      margin-top: 20px;
      letter-spacing: 1px;
    }
  </style>
</head>

<body class="container-bg">
  <div class="bg">
    <div class="banner">
      <div class="turnplate" style="background-image:url(images/cj_bg.png);background-size:100% 100%;">
        <!-- <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas> -->
        <div id="wheelcanvas" style="background: url(images/WechatIMG221.png) no-repeat;background-size: cover;"></div>
        <img class="pointer" src="images/jt2.png" />
      </div>
    </div>

    <!--  领取奖品 -->
    <div id="succBox1" class="dialogBox" style="display: none;">
      <div class="boxContent">
        <div class="closed closed1">
          <img src="images/closed-icon.png" />
        </div>
        <div class="contentInfo1"></div>
        <div class="contentInfo2">运气不错哦！ 生活美美哒！</div>
        <a class="succBut1"></a>
      </div>
    </div>

    <!--  填写信息 -->
    <div id="succBox2" class="dialogBox" style="display: none;">
      <div class="boxContent box2">
        <div class="fromBox">
          <div class="inputBox">
            <label>姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            <input id="name" class="validation" data-validat="require">
            <span></span>
          </div>
          <div class="inputBox">
            <label>手机号码</label>
            <input id="phone" type="number" class="validation" data-validat="require,phone">
            <span></span>
          </div>
          <div class="inputBox">
            <label>公司名称</label>
            <input id="company" class="validation" data-validat="require">
            <span></span>
          </div>
        </div>
        <a class="succBut2"></a>
      </div>
    </div>

    <!--  领取成功 -->
    <div id="succBox3" class="dialogBox" style="display: none;">
      <div class="boxContent box3">
        <div class="closed closed3">
          <img src="images/closed-icon.png" />
        </div>
        <div class="contentInfo3">
          谢谢参与
          <br />
          <label>现在可以找工作人员
            <br />领取
            <span>奖品了！</span>
          </label>
        </div>
      </div>
    </div>

    <!-- 中奖记录-->
    <div id="succBox4" class="dialogBox record" style="display: none;">
      <div class="boxContent">
        <div class="closed closed4">
          <img src="images/closed-icon.png" />
        </div>
        <div class="contentInfo1"></div>
      </div>
    </div>

    <!-- <div class="company-logo">
      <img src="./images/logo.png" alt="" srcset="">
    </div> -->
  </div>
  <footer>
    该活动最终解释权归属武汉博晟安全技术股份有限公司所有
  </footer>
  <div class="loading">
    <div class="loadcon">
      <img src="images/loading.gif">
      <div class="infos">正在加载中...</div>
    </div>
  </div>
</body>

</html>